<template>
  <div class="home">
        <!-- 刷新 -->
        <!-- <pull-refresh v-model="loading" @refresh="onRefresh"> </pull-refresh> -->
    <Top></Top>
    <!-- 推荐内容 -->
    <main>
      <div>
        <img style="width:80%" src="../imgs/房子地产_看图王.png" alt="">
        <!-- <icon name="star-o" color="#1989fa" size="1rem" /> -->
        <p>民宿团购</p>
      </div>
      <div>
        <img style="width:70%" src="../imgs/房子.png" alt="">
        <!-- <icon name="star-o" color="#1989fa" size="1rem" /> -->
        <p>品牌民宿</p>
      </div>
      <div>
        <img style="width:80%" src="../imgs/学士帽.png" alt="">
        <!-- <icon name="star-o" color="#1989fa" size="1rem" /> -->
        <p>学生特价</p>
      </div>
      <div>
        <img style="width:70%" src="../imgs/排行_看图王.png" alt="">
        <!-- <icon name="star-o" color="#1989fa" size="1rem" /> -->
        <p>网红推荐</p>
      </div>
    </main>
    <!-- 轮播 -->
    <swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <swipe-item :to="{ name: 'Student' }">
        <img src="../imgs/新客专享_看图王(1).png" alt="" />
      </swipe-item>
      <swipe-item>
        <img src="../imgs/悦慢管家_看图王.png" alt="" />
      </swipe-item>
      <swipe-item><img src="../imgs/精选推荐_看图王.png" alt="" /></swipe-item>
    </swipe>
    <!-- <div class="ban">
      <img class="banner" src="https://i.ibb.co/XkPhdbd/1.png" alt="" />
     
    </div> -->
    <!-- 推荐 -->
    <List></List>
  </div>
</template>

<script setup>
import { ref } from "vue";
import {
  Swipe,
  SwipeItem,
  PullRefresh,
  Toast,
  Icon,
} from "vant";


import List from "../components/List.vue";
import Top from "../components/Top.vue";


// 刷新
/* const count = ref(0);
const active = ref(0);
const loading = ref(false);
const onRefresh = () => {
  setTimeout(() => {
    Toast("刷新成功");
    loading.value = false;
    count.value++;
  }, 1000);
}; */


</script>

<style scoped>
.home {
  background-color: rgb(238, 238, 238);
}


/* 推荐内容 */
main {
  display: flex;
  justify-content: space-around;
  width: 90%;
  height: 10%;
  margin: auto;
  margin-top: 4rem;
  border-radius: 10px;
  background-color: #fff;
}
main div {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  justify-content: space-evenly;
}
main p {
  font-size: 0.3rem;
}
/* 图片 */
.my-swipe{
  width: 90vw;
  height: 16vh;
  margin: 5%;
}
.my-swipe img {
  width: 100%;
  height: 100%;
}
.banner {
  width: 100%;
  height: 100%;
}
/* 推荐 */

</style>
